<template>
  <div class="zfbmy">
    <div class="outmain ba_f formwidth">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>支付宝蚂蚁门店设置</span>
        </div>
      </div>
<!--      <div class="ba_f8 mar_20 pad_20">-->
<!--        <div class="lh25 mar_t10 msgtext fon_12">温馨提示：添加门店，请先将该网址<span class="subjectcolor2 mar_lr5">{{ url }}</span>填写到支付宝小程序应用网关</div>-->
<!--      </div>-->
      <el-tabs v-model="activeName" @tab-click="handleClick" class="mar_b20">
        <el-tab-pane label="支付宝代运营授权" name="1">
          <div v-if="activeName=='1'">
            <el-form ref="formData2" label-width="180px" class="mar_t20">
              <el-form-item label="支付宝账号" required>
                <el-input v-model="formData2.account" placeholder="请输入支付宝账号"></el-input>
                <div class="yb_margin lh16">请填写真实的支付宝账号</div>
              </el-form-item>
              <el-form-item label="商户号" v-if="info.state=='2'">
                <el-input v-model="merchant_no"></el-input>
              </el-form-item>
              <el-form-item label="授权详情" v-if="info.state!='2'">
                <el-button type="text" class="subjectcolor2" @click="djsq">点击授权</el-button>
              </el-form-item>
              <el-form-item label="授权状态">
                <el-tag size="medium" type="info" v-if="info.state=='0'">待授权</el-tag>
                <el-tag size="medium" type="warning" v-if="info.state=='1'">待确认</el-tag>
                <el-tag size="medium" type="success" v-if="info.state=='2'">已授权</el-tag>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane label="支付宝蚂蚁门店设置" name="2">
          <div v-if="activeName=='2'">
            <el-form ref="form" :model="formData" label-width="180px" class="mar_t20">
              <el-form-item label="门店ID" v-if="formData.shop_id">
                <el-input v-model="formData.shop_id" placeholder="请输入门店ID" disabled></el-input>
              </el-form-item>
              <el-form-item label="门店名称" prop="shop_name" required>
                <el-input v-model="formData.shop_name" placeholder="请输入门店名称"></el-input>
              </el-form-item>
              <el-form-item label="门店编号" prop="store_no" required>
                <el-input v-model="formData.store_no" placeholder="请输入门店编号"></el-input>
              </el-form-item>
              <el-form-item label="经营类目" prop="categoryData" required>
                <el-cascader
                    v-model="formData.categoryData"
                    :options="optionsCategory"
                    :props="customProps"
                    @change="handleChange"
                ></el-cascader>
              </el-form-item>
              <!--          <el-form-item label="门店所属商家" prop="store" required>-->
              <!--            <el-input v-model="formData.store" placeholder="请输门店所属商家"></el-input>-->
              <!--          </el-form-item>-->
              <el-form-item label="门店地址" prop="address" required>
                <el-input v-model="formData.address" placeholder="请输入门店地址"></el-input>
              </el-form-item>
              <el-form-item label="门店区域" prop="cityData" required>
                <el-cascader v-model="formData.cityData" :options="cityDataOption" :props="customProps2" size='medium'
                             @change='cascaderChange'
                             filterable></el-cascader>
              </el-form-item>
              <el-form-item label="联系电话" prop="contact_mobile" required>
                <el-input v-model="formData.contact_mobile" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="mar_t20 ba_f pad_20 t_c" v-if="activeName=='2'">
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import {getAliSaveStore, postAliSaveStore} from '@/api/setup.js';
import category from '@/plugins/category';
import area from '@/plugins/area';
import {mapState} from "vuex";
import {authInfo, sendAuth} from "@/api/plug";

export default {
  data() {
    return {
      activeName:'1',
      formData: {
        shop_name: '',
        address: '',
        store_no: '',
        contact_mobile: '',
        categoryData: [],
        cityData: [],
        storeId: '',
      },
      url:'',
      optionsCategory: [],
      cityDataOption: [],
      customProps: {
        value: 'categoryCode',
        label: 'categoryName',
        children: 'childrenNodes'
      },
      customProps2: {
        value: 'areaCode',
        label: 'areaName',
        children: 'districtList'
      },
      formData2:{
        storeId:'',
        account:'',
      },
      info: {},
      merchant_no:'',
    };
  },
  created() {
    this.bus.$emit('loading', true);
    this.authInfo()
    this.areaMet()
    // this.init()
  },
  computed: {
    ...mapState(['storeId']),
  },
  methods: {
    async djsq() {
      if(!this.formData2.account){
        this.$baseMessage('请填写支付宝账号', "error");
        return
      }else{
        this.formData2.storeId = this.storeId
        const {msg} = await sendAuth(this.formData2);
        this.$baseMessage(msg, "success");
        const {data} = await authInfo({storeId:this.storeId});
        if(data){
          this.info = data
          this.formData2.account = data.account
          this.merchant_no = data.merchant_no
        }
      }
    },
    async authInfo(){
      const {data} = await authInfo({storeId:this.storeId});
      this.bus.$emit('loading', false);
      if(data){
        this.info = data
        this.formData2.account = data.account
        this.merchant_no = data.merchant_no
      }
    },
    async handleClick() {
      if (this.activeName == '2') {
        this.areaMet()
        this.init()
      } else if (this.activeName == '1') {
        this.authInfo()
      }
    },
    handleChange(value) {
      this.formData.categoryData = value
    },
    cascaderChange(e) {
      this.formData.cityData = e
    },
    areaMet() {
      this.optionsCategory = category
      const processSubjectTree = tree => {
        tree.forEach(branch => {
          if (branch.districtList) {
            if (branch.districtList.length) {
              processSubjectTree(branch.districtList);
            } else {
              branch.districtList = undefined;
            }
          }
        });
      };
      processSubjectTree(area);
      this.cityDataOption = area
    },
    async init() {
      const { data } = await getAliSaveStore({storeId:this.storeId});
      this.url = data.url;
      this.form2 = this.formData;
      this.formData = Object.assign(this.form2, data);
      this.bus.$emit('loading', false);
    },
    submitForm() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.formData.storeId=this.storeId
          const { msg } = await postAliSaveStore(this.formData);
          this.$baseMessage(msg, 'success');
          this.init();
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss">
.el-icon-check:before {
  transform: rotate(0deg);
}
</style>
